<template>
  <div class="RootView">
    <!-- 底部导航栏 -->
    <mt-tabbar
      v-model="selected"
      :selected.sync="selected"
      class="button_tab"
      :fixed="true"
    >
      <mt-tab-item id="shopping">
        <img
          slot="icon"
          src="../assets/shopping.png"
          v-if="selected == 'shopping'"
        />
        <img slot="icon" src="../assets/shopping_nocoloer.png" v-else />
        商城
      </mt-tab-item>
      <mt-tab-item id="sginUp">
        <img
          slot="icon"
          src="../assets/sginUp.png"
          v-if="selected == 'sginUp'"
        />
        <img slot="icon" src="../assets/sginUp_nocoloer.png" v-else />
        勉强日语
      </mt-tab-item>
      <mt-tab-item id="square">
        <img
          slot="icon"
          src="../assets/square.png"
          v-if="selected == 'square'"
        />
        <img slot="icon" src="../assets/square_nocoloer.png" v-else />
        广场
      </mt-tab-item>
      <mt-tab-item id="my">
        <img slot="icon" src="../assets/my.png" v-if="selected == 'my'" />
        <img slot="icon" src="../assets/my_nocoloer.png" v-else />
        我的
      </mt-tab-item>
    </mt-tabbar>

    <!-- 对应的页面 -->
    <mt-tab-container
      v-model="selected"
      :active.sync="selected"
      class="tabView"
    >
      <mt-tab-container-item id="shopping">
        <Mall v-if="selected == 'shopping'"></Mall>
      </mt-tab-container-item>
      <mt-tab-container-item id="sginUp">
        <SignUp v-if="selected == 'sginUp'"></SignUp>
      </mt-tab-container-item>
      <mt-tab-container-item id="square">
        <Square v-if="selected == 'square'"></Square>
      </mt-tab-container-item>
      <mt-tab-container-item id="my">
        <My v-if="selected == 'my'"></My>
      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>

<script>
import SignUp from "@/components/signUp/SignUp.vue";
import My from "@/components/my/My.vue";
import Mall from "@/components/shopping/Mall.vue";
import Square from "@/components/square/Square.vue";
export default {
  components: {
    SignUp,
    My,
    Mall,
    Square
  },
  data() {
    return {
      selected: "shopping"
    };
  },
  created() {
    let strClick = sessionStorage.getItem("jumpIndex");
    if (strClick != null) {
      this.selected = strClick;
    }
  },
  watch: {
    selected(val) {
      sessionStorage.setItem("jumpIndex", val); // 存入一个值
    }
  }
};
</script>

<style lang="scss" scoped>
// 取消底部导航的第三方原生背景颜色效果
.mint-tabbar {
  background-color: #ffffff;
}
.mint-tabbar > .mint-tab-item.is-selected {
  background-color: #ffffff;
}

.tabView {
  width: 100%;
  height: 80%;
}
.button_tab {
  height: 3.4375rem;
}
.mint-tabbar > .mint-tab-item.is-selected {
  color: #ff2000;
}
</style>
